import React from 'react'
import { Row, Col, Card, Tag } from 'antd'
import { MessageOutlined, ReconciliationOutlined, SafetyOutlined } from '@ant-design/icons'

const PublicOpinion: React.FC = () => {
  const opinionItems = [
    {
      title: '民意收集',
      description: '村民意见和诉求收集平台',
      status: 'active',
      icon: <MessageOutlined />
    },
    {
      title: '纠纷调解',
      description: '在线矛盾纠纷调解服务',
      status: 'active',
      icon: <ReconciliationOutlined />
    },
    {
      title: '权益保障',
      description: '村民权益保障和申诉渠道',
      status: 'developing',
      icon: <SafetyOutlined />
    }
  ]

  return (
    <div>
      <div className="page-title">
        <MessageOutlined />
        民意诉求与矛盾纠纷调解模块
      </div>

      <Row gutter={[16, 16]}>
        {opinionItems.map((item, index) => (
          <Col xs={24} sm={12} lg={8} key={index}>
            <Card 
              className="custom-card"
              actions={[
                <a key="view">查看详情</a>,
                <a key="submit">提交诉求</a>
              ]}
            >
              <Card.Meta
                avatar={item.icon}
                title={
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    {item.title}
                    <Tag color={item.status === 'active' ? 'success' : 'processing'}>
                      {item.status === 'active' ? '已上线' : '开发中'}
                    </Tag>
                  </div>
                }
                description={item.description}
              />
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  )
}

export default PublicOpinion